<template>
    <div>
        <input type="text" @keyup="handleKeyup($event)"><br>
        <span v-if="count>0">您按了回车键<span>{{count}}</span>次</span>
        <br><br>
        <input type="text" @keyup.enter="handleKeyup1()"><br>
        <span v-if="number>0">您按了回车键<span>{{number}}</span>次</span>
    </div>
</template>

<script>
import { reactive, toRefs } from '@vue/reactivity'
export default {
  setup () {
    const state = reactive({
      count: 0,
      number: 0
    })

    const handleKeyup = (e) => {
      if (e.keyCode === 13) {
        state.count++
      }
    }

    const handleKeyup1 = () => {
      state.number++
    }

    return {
      ...toRefs(state),
      handleKeyup,
      handleKeyup1
    }
  }
}
</script>

<style scoped>
span span {
  font-size: 20px;
  color: red;
  font-weight: 900;
  margin: 5px;
}
</style>
